/<template>
  <div>
    <div class="inpbox">
      <input type="text" placeholder="笔记本" />
    </div>
    <div class="tabbox">
      <van-tabs v-model="active">
        <van-tab
          v-for="(item, index) in num"
          :key="index"
          :title="list[index].name"
        >
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(v, i) in 2" :key="i">
              <van-grid :column-num="5">
                <van-grid-item
                  v-for="(a, b) in 10"
                  :key="b"
                  :icon="
                    list[i].child[i * 10 + b]
                      ? list[i].child[i * 10 + b].img
                      : ''
                  "
                  :text="
                    list[i].child[i * 10 + b]
                      ? list[i].child[i * 10 + b].title
                      : ''
                  "
                />
              </van-grid>
            </van-swipe-item>
          </van-swipe>
          <div class="dlbox">
              <div>
                    <dl v-for="q,w in dllist" :key="w">
                        <dt>
                            <img :src="q.img" alt="">
                        </dt>
                        <dd>
                            <h3>{{q.title}}</h3>
                        </dd>
                    </dl>
           </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      active: 1,
      list: [],
      totalNum: 0,
      num: 0,
      dllist:[]
    };
  },
  mounted() {
    axios.get("/list").then((res) => {
      this.list = res.data;
      this.num = res.data.length;
      this.dllist=res.data[0].child;
      console.log(this.dllist);
    });
  },
};
</script>

<style lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.dlbox{
    width: 100%;
    height: calc(100vh - 316px);
    overflow-y: scroll;
    >div{
        width: 100%;
        height: auto;
        >dl{
            width: 48%;
            height: 250px;
            display: inline-block;
            >dt{
                width: 100%;
                height: 80%;
                >img{
                    padding: 5px;
                    width: 100%;
                    height: 100%;
                }
            }
            >dd{
                line-height: 30px;
            }
        }
    }
}
.inpbox{
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 10px;
    >input{
        flex: 1;
        width: 100%;
        height: 40px;
        border-radius: 15px;
    }
}
</style>